<template>
  <div>
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :expand-row-keys="defaultExpandedKeys"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称" sortable width="180">
        </el-table-column>
        <el-table-column prop="code" label="权限值" sortable width="180">
        </el-table-column>
        <el-table-column prop="toCode" label="跳转权限值"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <!-- 加号按钮 -->
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              title="添加菜单"
              :disabled="row.level === 4"
              @click="clickPlus(row)"
            ></el-button>
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit-outline"
              size="mini"
              title="修改菜单"
              :disabled="row.level === 1"
              @click="clickChange(row)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              title="删除"
              :disabled="row.level === 1"
              @click="open(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 点击按钮弹框 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" top="0">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="功能权限值" :label-width="formLabelWidth">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
          <el-form-item
            label="跳转路由权限值"
            :label-width="formLabelWidth"
            v-if="routeDisabled"
          >
            <el-input v-model="form.toCode"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleSave()">取 消</el-button>
          <el-button type="primary" @click="addPermission(mineRow)"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import permissionApi from "@/api/acl/permission";

export default {
  data() {
    return {
      // 储存当前点击行的row
      mineRow: "",
      // 数据渲染
      tableData: [],
      // 默认展开数组
      defaultExpandedKeys: ["1"],
      // dialogTableVisible: false,
      // 控制对话框的显示
      dialogFormVisible: false,
      // 对话框的标题
      title: "",
      // 控制对话框的第三个input显示
      routeDisabled: false,
      // 表单数据
      form: {
        name: "",
        code: "",
        level: 0,
        pid: "",
        toCode: "",
        type: 1,
      },
      formLabelWidth: "120px",
      isAdd: false,
    };
  },
  methods: {
    // 合并添加的数据
    concatObj(row) {
      // console.log(row);
      this.form.level = row.level >= 4 ? 4 : row.level + 1;
      this.form.pid = row.id;
      this.form.toCode = this.form.code;
      // this.form.type = row.level === 3 ? 2 : 1;
      this.form.type = row.type;
    },

    // 删除接口
    async removePermission(id) {
      await permissionApi.removePermission(id);
      this.getPermissionList();
    },

    // 点击删除按钮弹窗
    open(id) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.removePermission(id);
          this.getPermissionList();
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除失败",
          });
        });
    },

    // 点击弹框的确定按钮
    async addPermission(row) {
      // console.log(this.form);
      try {
        if (this.isAdd) {
          await permissionApi.addPermission(this.form);
          this.dialogFormVisible = false;
          this.getPermissionList();
          (this.form = {
            name: "",
            code: "",
            level: 0,
            pid: "",
            toCode: "",
            type: 1,
          }),
            this.$message({
              type: "success",
              message: "添加成功",
            });
          this.mineRow = "";
        } else {
          console.log(this.form);
          const aaa = await permissionApi.updatePermission(this.form);
          console.log(aaa);
          this.dialogFormVisible = false;
          this.getPermissionList();
          this.$message({
            type: "success",
            message: "修改成功",
          });
        }
      } catch (error) {
        if (this.isAdd) {
          this.$message({
            type: "info",
            message: "添加失败",
          });
        } else {
          this.$message({
            type: "info",
            message: "修改失败",
          });
        }
      }
    },

    // 点击取消按钮
    cancleSave() {
      this.dialogFormVisible = false;
      this.mineRow = "";
      this.form = {};
    },

    // 点击加号按钮
    clickPlus(row) {
      // 合并数据
      this.concatObj(row);
      this.title = "添加菜单";
      this.mineRow = row;
      this.dialogFormVisible = true;
      this.routeDisabled = false;
      this.isAdd = true;
    },

    // 点击修改按钮
    clickChange(row) {
      // console.log(row);
      // 合并数据
      this.concatObj(row);
      this.title = "修改功能";
      // 数据回显
      this.echoForm(row);
      this.mineRow = row;
      this.dialogFormVisible = true;
      this.routeDisabled = row.level === 4 ? true : false;
      this.isAdd = false;
      // console.log(this.mineRow.level);
    },

    // 回显数据
    echoForm(row) {
      this.form.name = row.name;
      this.form.code = row.code;
      this.form.toCode = row.toCode;
    },

    // 获取列表
    async getPermissionList() {
      const result = await permissionApi.getPermissionList();
      this.tableData = result.data.children;
    },
  },
  mounted() {
    this.getPermissionList();
  },
};
</script>

<style lang="sass" scoped></style>
